
<template>
  
  <div class="common-layout">
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-container>
        <el-header>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
           <el-icon color="#409EFC" class="no-inherit">
           <share />
        </el-icon>
            <el-menu-item> 英雄联盟</el-menu-item>
            <el-sub-menu index="2">
              <template #title>游戏资料</template>
              <el-menu-item index="2-4-1">item one</el-menu-item>
              <el-menu-item index="2-4-2">item two</el-menu-item>
              <el-menu-item index="2-4-3">item three</el-menu-item>
            </el-sub-menu>
            <el-menu-item> 商城/合作</el-menu-item>
            <el-menu-item> 商城/合作</el-menu-item>
            <el-menu-item> 商城/合作</el-menu-item>
            <el-sub-menu index="2-4"></el-sub-menu>
          </el-menu>
        </el-header>
        <el-main>
          <el-aside style="height: 424px; width: 60%; float: left">
            <div class="block">
              <span class="demonstration">今虎贺岁</span>
              <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="item in datas" :key="item">
                  <h3 class="small">{{ item }}</h3>
                  
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-aside>
          <el-aside style="height: 424px; width: 40%; float: left">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handle">
             
              <el-tab-pane label="公告" name="second">
                  <h2>小蜜蜂宝典二 甜蜜上线</h2>
              </el-tab-pane>
              <el-tab-pane label="赛事" name="third">
                  2022 wbg vs omg  赛事在上海进行
              </el-tab-pane>
              <el-tab-pane label="攻略" name="fourth">
                  排位黑科技 上单赵信轻取 上将首集
              </el-tab-pane>
              <el-tab-pane label="社区" name="first">
                  英雄联盟语音彩蛋分析
              </el-tab-pane>
            </el-tabs>
          </el-aside>
        </el-main>
         
        <el-footer>Footer</el-footer>
        <el-calendar v-model="value"></el-calendar>
      </el-container>
    </el-container>

  </div>
</template>


<script lang="ts" setup>
import {ref} from "vue";
const vue =ref(new Date())
const activeIndex = ref("1");
const activeIndex2 = ref("1");
const activeName = ref("first");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handle = (tab: string, event: Event) => {
  console.log(tab, event);
};

let datas = ["2022电玩秘宝", "云顶海克斯夺冠","掌盟夺宝行迹","云顶宝典 霓虹宝库","冲击之刃2022"];
</script>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  background-color: #f4f5f7;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.common-layout .el-header {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  /* line-height:3600px; */
  height: 330px;
}
.common-layout .el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}
.common-layout .el-footer {
  line-height: 60px;
}

.common-layout .el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
}

.common-layout .el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 500px;
}

.common-layout > .el-container {
  margin-bottom: 40px;
}

.common-layout .el-container:nth-child(5) .el-aside,
.common-layout .el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.common-layout .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
